<template>
  <div class="home">
    <LayoutComponent>
      <template v-for="item in list">
        <van-panel :key="item.id" :title="item.title" :desc="item.desc">
          <div>
            <van-image lazy-load width="100" height="100" :src="item.img" />
          </div>
          <template #footer>
            <van-button size="small" @click="handleToCart(item)">加入</van-button>
            <!-- <van-button size="small" type="danger">按钮</van-button> -->
          </template>
        </van-panel>
      </template>
    </LayoutComponent>
  </div>
</template>

<script>
import LayoutComponent from '@/layout/index.vue'
import { mapActions, mapState, mapMutations } from 'vuex'
import Vue from 'vue'
import { Lazyload } from 'vant'

Vue.use(Lazyload)

export default {
  name: 'HomeView',
  components: {
    LayoutComponent,
  },
  // mapState 放置在计算属性中拿取
  computed: {
    ...mapState(['list']),
  },
  created() {
    this.fetch_list({})
  },
  methods: {
    ...mapActions(['fetch_list']),
    ...mapMutations(['toCart']),
    handleToCart(item) {
      this.toCart(item)
    },
  },
}
</script>
<style lang="scss" scoped>
.van-panel {
  // background: #eee;
  margin: 5px;
}
.van-panel__footer {
  padding: 8px 16px;
  display: flex;
  justify-content: flex-end;
}
</style>
